<!--
 * @Descripttion: 
 * @version: 
 * @Author: jiating
 * @Date: 2021-02-22 17:03:48
 * @LastEditors: jiating
 * @LastEditTime: 2021-02-24 14:59:55
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <link rel="stylesheet" href="./css/mobile.css"/>
    <link rel="stylesheet" href="./css/apn.css">
    <style>
       .new_td{
           line-height: 18px;
           
       }
       .new_td .check{
           height: 100px;
           overflow: auto;
       }
        
    </style>
</head>

<body>
<div class="main">
    <div class="tit-heade">
        <div class="itemOne">
            <img src="./image/left.png" >
        </div>
        <div class="itemTwo">
            <div class="item-chil">
                <img src="./image/logoutOne.png">
            </div>
            <div class="item-chil">
                <a href="/action/logout">ログアウト</a>
            </div>
            
        </div>
    </div>  
    <div class="nav2">
        <div class="nav-item">
            <div id='x1' class="item" onclick="toPage('./home.html')">ホーム</div>
        </div>
        <div class="nav-item">
            <div id='x2' class="item no-act" onclick="toPage('./mobileData.html')">モバイルネットワーク</div>
            <div class="">
                <div>
                    <div class="">
                        <div class="item1" id="wifi1" onclick="toPage('./mobileData.html')">モバイルデータ設定</div>
                        <div class="item1" id="wifi_list" onclick="toPage('./priorityNetwork.html')">優先ネットワーク設定</div>
                        <div class="item1" id="wifi_list" onclick="toPage('./webSearch.html')">ネットワーク検索設定</div>
                        <div class="item1 choose" id="wifi_list" onclick="toPage('./apn.html')">アクセスポイント設定</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x3' class="item no-act" onclick="toPage('./wifi.html')">Wi-Fi設定</div>
        </div>
        <div class="nav-item">
            <div id='x4' class="item no-act" onclick="toPage('./dhcp.html')">Ethernet設定</div>
        </div>
        <div class="nav-item">
            <div id='x5' class="item no-act" onclick="toPage('./port.html')">LAN設定</div>
            
        </div>
        <div class="nav-itm">
            <div id='x6' class="item no-act" onclick="toPage('./password.html')">端末設定</div>
        </div>
    </div>

    <div id="mobile" class="content">
        <div class="title">アクセスポイント</div>

        <div style="margin-left: 100px;margin-top: 10px;">
            <p>アクセスポイント（APN）を設定できます。モバイルネットワークでデータ通信を利用する際に必要です。</p>
            <p>※設定値については各モバイルネットワーク通信事業者へお問合せください。</p>
        </div>

        <div class="mac" style="padding: 0 5%">

            <div id='sim1'>SIM1</div>
            <table class="default-table" id="wifi-table" style="margin-top: 20px;">
                
                <thead>
                  <tr>
                    <th>APNs</th>
                    <th colspan="2">動作</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            
            <div id="sim2">SIM2</div>
            <table class="default-table" id="wifi-table1" style="margin-top: 20px;">
                <thead>
                  <tr>
                    <th>APNs</th>
                    <th colspan="2">動作</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="horizontal-box" style="margin-top: 40px">
                <div class="submit-btn" onclick="apnslINK()">追加</div>
            </div>
        </div>
    </div>
    <div id="apnForm">
        <div class="form-win">
            <table style="font-size: 14px;">
                <tr>
                    <th><label class="default-label" for="access-point-name">名前</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="name"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">APN</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="apn"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">プロキシ</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="proxy"/>
                    </td>
                </tr>
                <tr>
                    
                    <th><label class="default-label" for="access-point-name">ポート</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="port"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">ユーザー名</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="user"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">パスワード</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="password"/>
                    </td>
                </tr>
                <tr>
                    
                </tr>
                <tr>
                    <th><label class="default-label" for="access-point-name">サーバー</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="server"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">MMSC</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="mmsc"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">MMSプロキシ</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="mmsproxy"/>
                    </td>
                </tr>
                <tr>
                    
                    <th><label class="default-label" for="">優先ネットワーク</label></th>
                    <td>
                        <label style="display: block;">
                            <input onclick="security_click(1)" class="a-radio" type="radio" name="preferred-network1"
                                value="11" checked><span class="b-radio"></span>SIM1
                        </label>
                        <label style="display: block;">
                            <input onclick="security_click(2)" class="a-radio" type="radio" name="preferred-network1"
                                value="23" ><span class="b-radio"></span>SIM2
                        </label>
                    </td>
                    <th><label class="default-label" for="access-point-name">MCC</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="mcc"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">MNC</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="mnc"/>
                    </td>
                </tr>
                <tr>
                    
                    <th><label class="default-label" for="access-point-name">認証タイプ</label></th>
                    <td>
                        <select class="default-select" name="authtype" id="authtype">
                            <option value="0">None</option>
                            <option class="ap-channel-0" value="1">PAP</option>
                            <option class="ap-channel-0" value="2">CHAP</option>
                            <option class="ap-channel-0" value="3">PAP OR CHAP</option>
                        </select>
                    </td>
                    <th><label class="default-label" for="access-point-name">APNタイプ</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="type"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">APNプロトコル</label></th>
                    <td>
                        <select class="default-select" name="protocol" id="protocol">
                            <option value="0">ipv4</option>
                            <option class="ap-channel-0" value="1">ipv6</option>
                            <option class="ap-channel-0" value="2">ipv4/ipv6</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><label class="default-label" for="access-point-name">APNローミングプロトコル</label></th>
                    <td>
                        <select class="default-select" name="protocol" id="roaming_protocol">
                            <option value="0">ipv4</option>
                            <option class="ap-channel-0" value="1">ipv6</option>
                            <option class="ap-channel-0" value="2">ipv4/ipv6</option>
                        </select>
                    </td>
                    <th><label class="default-label" for="">APNの有効／無効</label></th>
                    <td>
                        <input type="checkbox"  name="carrier_enabled" id="carrier_enabled"
                               class="chooseBtn"/>
                        <label for="carrier_enabled" class="choose-label"/>
                    </td>
                    <th><label class="default-label" for="">ベアラ</label></th>
                    <td class="new_td">
                        <!-- <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="bearer"/> -->

                        <div class="check" onclick="jqchk()">
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="0"/>Unspecified</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="14"/>LTE</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="15"/>HSPAP</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="11"/>HSPA</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="10"/>HSUPA</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="9"/>HSDPA</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="3"/>UMTS</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="2"/>EDGE</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="1"/>GPRS</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="13"/>eHRPD</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="12"/>EVDO_B</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="8"/>EVDO_A</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="7"/>EVDO_0</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="6"/>1xRTT</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="5"/>IS95B</p>
                            <p><input type="checkbox" id="checkbox-01" name="bearer_entries"  value="4"/>IS95A</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th><label class="default-label" for="">MVNOの種類</label></th>
                    <td>
                        <select class="default-select" name="mvno_type" id="mvno_type">
                            <option value="">None</option>
                            <option class="ap-channel-0" value="SPN">SPN</option>
                            <option class="ap-channel-0" value="IMSI">IMSI</option>
                            <option class="ap-channel-0" value="GID">GID</option>
                            <option class="ap-channel-0" value="ICCID">ICCID</option>
                        </select>
                    </td>
                    <th><label class="default-label" for="">MVNO値</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="mvno_match_data"/>
                    </td>
                    <th><label class="default-label" for="access-point-name">MMSポート</label></th>
                    <td>
                        <input type="text" class="default-input" name="access-point-name"
                               placeholder="" id="mmsport"/>
                    </td>
                </tr>
            </table>
            <div class="horizontal">
                <div onclick="apConfigSet()" id="save-wifi" class="button-common">追加</div>
                <div onclick="closeApns()" class="button-common">キャンセル</div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="./js/utils.js"></script>
<script>
    var mcc0 = ''
    var mnc0 = ''
    var mcc1 = ''
    var mnc1 = ''
    var arr = []
    window.onload = function () {
        getData()
        getSimNum()
    }

    function getSimNum() {
        var num = sessionStorage.getItem('activeSimNumber')
        if (num == 0) {
            var btn = document.getElementById('x2')
            btn.onclick = function() {}
            btn.style.backgroundColor = '#eee'
        }

        var params = {}
        Ajax.post(baseUrl + '/action/getActiveSimCardNumber', JSON.stringify(params), function(res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                sessionStorage.setItem('activeSimNumber', response.data.activeSimNumber)
            }
        })
    }

    function getData(){
        var params = {}
        Ajax.post(baseUrl + '/action/apnList', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if(response.status == 'success') {
                var data = response.data
                if(data.slot0.apns){
                    mcc0 = response.data.slot0.mcc
                    mnc0 = response.data.slot0.mnc
                    for(var i = 0 ; i< data.slot0.apns.length; i++) {
                        var row = document.createElement('tr');
                        var oTd1=document.createElement('td');
                        var oTd2=document.createElement('td');
                        var oTd3=document.createElement('td');
                        oTd1.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'>${data.slot0.apns[i].name}</td>`;
                        oTd2.innerHTML = `<td><label style="display: block;">
                                                <input onclick="select_click0(${data.slot0.apns[i].key})" class="a-radio" type="radio" name="test1"
                                                    value="8"><span class="b-radio"></span>接続
                                            </label></td>`;
                        oTd3.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'><button onclick="del_click(${data.slot0.apns[i].key})">削除</button></td>`;
                        row.appendChild(oTd1);
                        row.appendChild(oTd2);
                        row.appendChild(oTd3);
                        var table = document.getElementById('wifi-table');
                        table.appendChild(row);

                        if(data.slot0.apns[i].selected == '1'){
                            document.getElementsByClassName('a-radio')[i].checked = true
                        }
                    }
                }else{
                    mcc0 = 0
                    mnc0 = 0
                    var table = document.getElementById('wifi-table');
                    var sim1 = document.getElementById('sim1');
                    table.style.display = 'none'
                    sim1.style.display = 'none'
                }

                if(data.slot1.apns){
                    mcc1 = response.data.slot1.mcc
                    mnc1 = response.data.slot1.mnc
                    for(var i = 0 ; i< data.slot1.apns.length; i++) {
                    var row = document.createElement('tr');
                    var oTd1=document.createElement('td');
                    var oTd2=document.createElement('td');
                    var oTd3=document.createElement('td');
                    oTd1.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'>${data.slot1.apns[i].name}</td>`;
                    oTd2.innerHTML = `<td><label style="display: block;">
                                            <input onclick="select_click1(${data.slot1.apns[i].key})" class="sim2" id="SIM" type="radio" name="test2"
                                                value="8"><span class="b-radio"></span>接続
                                        </label></td>`;
                    oTd3.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'><button onclick="del_click(${data.slot1.apns[i].key})">削除</button></td>`;
                    row.appendChild(oTd1);
                    row.appendChild(oTd2);
                    row.appendChild(oTd3);
                    var table = document.getElementById('wifi-table1');
                    table.appendChild(row);

                    if(data.slot1.apns[i].selected == '1'){
                        document.getElementsByClassName('sim2')[i].checked = true
                        // document.getElementById('SIM')[i].checked = true
                    }
                }
                }else{
                    mcc1 = 0
                    mnc1 = 0
                    var table = document.getElementById('wifi-table1');
                    var sim1 = document.getElementById('sim2');
                    table.style.display = 'none'
                    sim1.style.display = 'none'
                }
                    
                } else {
                    Message.showmsg(response.message)
                }
        })
    }

    function closeApns() {
        var apn = document.getElementById('apnForm')
        apn.style.display = 'none'
    }

    function security_click(data){
        if(data == 1){
            document.getElementById('mcc').value = mcc0
            document.getElementById('mnc').value = mnc0
        }
        if(data == 2){
            document.getElementById('mcc').value = mcc1
            document.getElementById('mnc').value = mnc1
        }
    }

    function select_click0(data){
        var params = {
            selectedKey:data.toString(),
            slotId:'0'
        }
        Ajax.post(baseUrl + '/action/switchApn', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                Message.showmsg(response.message)
            } else {
                Message.showmsg(response.message)
            }
        })
    }
    
    function select_click1(data){
        var params = {
            selectedKey:data.toString(),
            slotId:'1'
        }
        Ajax.post(baseUrl + '/action/switchApn', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                Message.showmsg(response.message)
            } else {
                Message.showmsg(response.message)
            }
        })
    }

    function del_click(data){
        var params = {
            key:data.toString()
        }
        Ajax.post(baseUrl + '/action/deleteApn', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                window.location.reload()
            } else {
                Message.showmsg(response.message)
            }
            window.location.reload()
        })
    }

    function apnslINK(data){
        var apnForm = document.getElementById("apnForm");
        apnForm.style.display = 'block'
        document.getElementById('mcc').value = mcc0
        document.getElementById('mnc').value = mnc0
        document.getElementById('type').value = 'default'
    }

    function apConfigSet(){
        var name = document.getElementById('name').value
        var apn = document.getElementById('apn').value
        if(!name){
            var apn = document.getElementById('apnForm')
            apn.style.display = 'none'
            Message.info('「名前」を入力してください')
        }else if(!apn){
            var apn = document.getElementById('apnForm')
            apn.style.display = 'none'
            Message.info('「APN」を入力してください')
        }else{
            setData()
        }
        
    }
    function setData(){
        console.log(Utils.GetSelectValue("authtype"),Utils.GetSelectValue("mvno_type"),arr,12121212121)
        var carrier_enabled = document.getElementById('carrier_enabled').checked == true ? '1':'0'
        var params = {
            name:document.getElementById('name').value,
            apn:document.getElementById('apn').value,
            proxy:document.getElementById('proxy').value,
            port:document.getElementById('port').value,
            user:document.getElementById('user').value,
            password:document.getElementById('password').value,
            server:document.getElementById('server').value,
            mmsc:document.getElementById('mmsc').value,
            mmsproxy:document.getElementById('mmsproxy').value,
            mmsport:document.getElementById('mmsport').value,
            mcc:document.getElementById('mcc').value,
            mnc:document.getElementById('mnc').value,
            authtype:Utils.GetSelectValue("authtype"),
            type:document.getElementById('type').value,
            protocol:Utils.GetSelectValue("protocol"),
            carrier_enabled:carrier_enabled,
            roaming_protocol:Utils.GetSelectValue("roaming_protocol"),
            bearer:arr,
            mvno_type:Utils.GetSelectValue("mvno_type"),
            mvno_match_data:document.getElementById('mvno_match_data').value
        }
        Ajax.post(baseUrl + '/action/createApn', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                Message.showmsg(response.message)
            } else {
                Message.showmsg(response.message)
            }
            window.location.reload()
        })
        var apn = document.getElementById('apnForm')
        apn.style.display = 'none'
        getData()
    }


    function jqchk(){
        arr = ''
        var obj = document.getElementsByName('bearer_entries');
        for (var i = 0; i < obj.length; i++) {
            if(obj[i].checked){
                arr += (','+obj[i].value)
            }
        }
    }
</script>
</body>

</html>
